import React, { useState } from 'react';
import styles from './index.module.less';
import { Button, Upload } from 'antd';
import { UploadChangeParam, UploadFile } from 'antd/es/upload';

// 形状类型定义
interface Shape {
    id: string;
    name: string;
    path: string;
}

// 预定义的25个形状（5x5网格）
const shapes: (Shape | null)[] = [
    // 第一行
    { id: 'circle', name: '圆形', path: 'M 12 22 A 10 10 0 1 1 12 2 A 10 10 0 1 1 12 22' },
    { id: 'square', name: '正方形', path: 'M 4 4 L 20 4 L 20 20 L 4 20 Z' },
    { id: 'heart', name: '心形', path: 'M 12 21.35 L 10.55 20.03 C 5.4 15.36 2 12.28 2 8.5 C 2 5.42 4.42 3 7.5 3 C 9.24 3 10.91 3.81 12 5.09 C 13.09 3.81 14.76 3 16.5 3 C 19.58 3 22 5.42 22 8.5 C 22 12.28 18.6 15.36 13.45 20.04 Z' },
    { id: 'rounded-rect', name: '圆角矩形', path: 'M 6 4 Q 4 4 4 6 L 4 18 Q 4 20 6 20 L 18 20 Q 20 20 20 18 L 20 6 Q 20 4 18 4 Z' },
    { id: 'diamond', name: '菱形', path: 'M 12 2 L 22 12 L 12 22 L 2 12 Z' },
    // 第二行
    { id: 'clover', name: '四叶草', path: 'M 12 2 Q 8 6 6 6 Q 4 6 4 8 Q 4 10 6 10 Q 8 10 12 6 Q 16 10 18 10 Q 20 10 20 8 Q 20 6 18 6 Q 16 6 12 2 M 12 6 Q 8 10 6 10 Q 4 10 4 12 Q 4 14 6 14 Q 8 14 12 18 Q 16 14 18 14 Q 20 14 20 12 Q 20 10 18 10 Q 16 10 12 6' },
    { id: 'd-shape', name: 'D形', path: 'M 4 4 L 4 20 L 16 20 Q 20 20 20 12 Q 20 4 16 4 Z' },
    { id: 'teardrop', name: '水滴', path: 'M 12 2 Q 8 6 12 12 Q 16 6 12 2 M 12 12 Q 10 20 8 20 Q 6 20 6 18' },
    { id: 'oval', name: '椭圆', path: 'M 4 8 A 8 6 0 0 1 20 8 A 8 6 0 0 1 4 8' },
    { id: 'capsule', name: '胶囊', path: 'M 6 4 Q 4 4 4 8 L 4 16 Q 4 20 6 20 L 18 20 Q 20 20 20 16 L 20 8 Q 20 4 18 4 Z' },
    // 第三行
    { id: 'flower', name: '花朵', path: 'M 12 2 Q 8 6 6 6 Q 4 6 4 8 Q 4 10 6 10 Q 8 10 12 6 Q 16 10 18 10 Q 20 10 20 8 Q 20 6 18 6 Q 16 6 12 2 M 12 10 Q 8 14 6 14 Q 4 14 4 16 Q 4 18 6 18 Q 8 18 12 14 Q 16 18 18 18 Q 20 18 20 16 Q 20 14 18 14 Q 16 14 12 10' },
    { id: 'triangle', name: '三角形', path: 'M 12 2 L 22 20 L 2 20 Z' },
    { id: 'trapezoid', name: '梯形', path: 'M 6 4 L 18 4 L 20 20 L 4 20 Z' },
    { id: 'bear-head', name: '熊头', path: 'M 12 4 Q 8 4 6 6 Q 4 8 4 12 Q 4 16 6 18 Q 8 20 12 20 Q 16 20 18 18 Q 20 16 20 12 Q 20 8 18 6 Q 16 4 12 4 M 8 10 Q 9 10 9 11 Q 9 12 8 12 M 16 10 Q 15 10 15 11 Q 15 12 16 12' },
    { id: 'blob', name: '不规则', path: 'M 8 4 Q 4 6 4 10 Q 4 14 6 18 Q 8 20 12 20 Q 16 20 18 18 Q 20 14 20 10 Q 20 6 18 4 Q 16 4 14 6 Q 12 4 10 4 Q 8 4 8 4' },
    // 第四行
    { id: 'star', name: '星形', path: 'M 12 2 L 14.5 9 L 22 9 L 15.5 14 L 18 22 L 12 16 L 6 22 L 8.5 14 L 2 9 L 9.5 9 Z' },
    { id: 'pentagon', name: '五边形', path: 'M 12 2 L 20 8 L 16 18 L 8 18 L 4 8 Z' },
    { id: 'hexagon', name: '六边形', path: 'M 12 2 L 20 6 L 20 18 L 12 22 L 4 18 L 4 6 Z' },
    { id: 'octagon', name: '八边形', path: 'M 12 2 L 18 4 L 20 10 L 20 14 L 18 20 L 12 22 L 6 20 L 4 14 L 4 10 L 6 4 Z' },
    { id: 'arrow', name: '箭头', path: 'M 12 2 L 22 12 L 16 12 L 16 20 L 8 20 L 8 12 L 2 12 Z' },
    // 第五行
    { id: 'cross', name: '十字', path: 'M 12 2 L 12 8 L 18 8 L 18 16 L 12 16 L 12 22 L 6 16 L 6 8 L 12 8 L 12 2' },
    { id: 'moon', name: '月亮', path: 'M 18 2 Q 22 6 22 12 Q 22 18 18 22 Q 14 18 14 12 Q 14 6 18 2' },
    { id: 'leaf', name: '叶子', path: 'M 12 2 Q 8 4 6 8 Q 4 12 6 16 Q 8 20 12 22 Q 16 20 18 16 Q 20 12 18 8 Q 16 4 12 2' },
    null,
    null,
];

// 描边大小选项
const strokeSizes = [
    { label: '满切', value: 0 },
    { label: '1mm', value: 1 },
    { label: '2mm', value: 2 },
    { label: '3mm', value: 3 },
    { label: '4mm', value: 4 },
    { label: '5mm', value: 5 },
];

const CuttingLine = () => {
    const [selectedShape, setSelectedShape] = useState<string>('circle');
    const [strokeSize, setStrokeSize] = useState<number>(2);
    const fileInputRef = React.useRef<HTMLInputElement>(null);

    const handleUploadClick = () => {
        if (fileInputRef.current) {
            fileInputRef.current.click();
        }
    };

    const handleFileChange = (info: UploadChangeParam<UploadFile<any>>) => {
        const file = info.file.originFileObj as File;
        if (!file) return;

        if (!file.type.startsWith('image/')) {
            alert('请选择图片文件');
            return;
        }

        const reader = new FileReader();
    }

    const handleStrokeSizeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = Number(e.target.value);
        setStrokeSize(value);
        // TODO: 应用描边大小到画布
        console.log('Stroke size:', value);
    };

    const handleShapeSelect = (shapeId: string) => {
        setSelectedShape(shapeId);
        // TODO: 应用形状到画布
        console.log('Selected shape:', shapeId);
    };

    const handleFullCutDescription = () => {
        // TODO: 显示满切说明
        alert('满切说明：满切是指完全切割，不留任何边距。');
    };

    // 计算滑块指示器位置（百分比）
    const getSliderIndicatorPosition = () => {
        const index = strokeSizes.findIndex(size => size.value === strokeSize);
        if (index === -1) return 0;
        return (index / (strokeSizes.length - 1)) * 100;
    };

    return (
        <div className={styles.wrap}>
            {/* 刀线信息部分 */}
            <div className={styles.section}>
                {/* <div className={styles.dimensions}>刀线尺寸: 34*50 mm</div> */}
                <Upload showUploadList={false} accept="image/*" onChange={handleFileChange} customRequest={() => {}}>
                    <Button type="primary">上传自定义刀线图</Button>
                </Upload>
            </div>

            {/* 描边形状部分 */}
            <div className={styles.section}>
                <h3 className={styles.subTitle}>描边形状</h3>
                <div className={styles.shapeGrid}>
                    {shapes.map((shape, index) => {
                        if (!shape) {
                            return <div key={`empty-${index}`} className={styles.shapePlaceholder} />;
                        }
                        return (
                            <button
                                key={shape.id}
                                className={`${styles.shapeItem} ${
                                    selectedShape === shape.id ? styles.selected : ''
                                }`}
                                onClick={() => handleShapeSelect(shape.id)}
                                title={shape.name}
                            >
                                <svg
                                    width="100%"
                                    height="100%"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    strokeWidth="1.5"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    style={{ overflow: 'visible' }}
                                >
                                    <path d={shape.path} />
                                </svg>
                                {selectedShape === shape.id && (
                                    <div className={styles.selectedIndicator}>
                                        <div className={styles.selectedCircle} />
                                    </div>
                                )}
                            </button>
                        );
                    })}
                </div>
            </div>
            {/* 描边大小部分 */}
            {/* <div className={styles.section}>
                <div className={styles.sliderContainer}>
                    <div className={styles.sliderTrack}>
                        <input
                            type="range"
                            min={0}
                            max={5}
                            step={1}
                            value={strokeSize}
                            onChange={handleStrokeSizeChange}
                            className={styles.slider}
                        />
                        <div
                            className={styles.sliderIndicator}
                            style={{ left: `${getSliderIndicatorPosition()}%` }}
                        >
                            <div className={styles.indicatorDot} />
                        </div>
                    </div>
                    <div className={styles.sliderLabels}>
                        {strokeSizes.map((size) => (
                            <span
                                key={size.value}
                                className={styles.sliderLabel}
                            >
                                {size.label}
                            </span>
                        ))}
                    </div>
                </div>
            </div> */}
        </div>
    );
};

export default CuttingLine;

